<template>
  <div class="page-container">
    <!--工具栏-->
    <div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
      <el-form :inline="true" :model="filters" :size="size">
        <el-form-item>
          <el-input v-model="filters.name" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item>
          <kt-button icon="fa fa-search" :label="$t('action.search')" perms="sys:loginlog:view" type="primary" @click="findPage(null)"/>
        </el-form-item>
      </el-form>
    </div>
    <!--表格内容栏-->
    <kt-table
      :data="pageResult" :columns="columns" :showOperation="showOperation" @findPage="findPage">
    </kt-table>
  </div>
</template>

<script>
import KtTable from "@/views/Core/KtTable"
import KtButton from "@/views/Core/KtButton"
import { format } from "@/utils/datetime"
export default {
  components: {
    KtTable,
    KtButton
  },
  data() {
    return {
      size: 'small',
      filters: {
        name: ''
      },
      columns: [
        {prop:"id", label:"ID", minWidth:60},
        {prop:"userName", label:"用户名", minWidth:100},
        {prop:"status", label:"状态", minWidth:120},
        {prop:"ip", label:"IP", minWidth:120},
        {prop:"time", label:"耗时", minWidth:80},
        {prop:"createBy", label:"创建人", minWidth:100},
        {prop:"createTime", label:"创建时间", minWidth:120, formatter:this.dateFormat}
        // {prop:"lastUpdateBy", label:"更新人", minWidth:100},
        // {prop:"lastUpdateTime", label:"更新时间", minWidth:120, formatter:this.dateFormat}
      ],
      pageRequest: { pageNum: 1, pageSize: 10 },
      pageResult: {},
      showOperation:false
    }
  },
  methods: {
    // 获取分页数据
    findPage: function (data) {
      if(data !== null) {
        this.pageRequest = data.pageRequest
      }
      this.pageRequest.params = [{name:'userName', value:this.filters.name}, {name:'status', value:'online'}]
      this.$api.loginlog.findPage(this.pageRequest).then((res) => {
        this.pageResult = res.data
      }).then(data!=null?data.callback:'')
    },
    // 时间格式化
    dateFormat: function (row, column, cellValue, index){
      return format(row[column.property])
    }
  },
  mounted() {
  }
}
</script>

<style scoped>

</style>
